<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="author" content="lijun; 67086071; zwlijun@qq.com" />
<title>XLIb - UI</title>
<script type="text/javascript" src="../core.js"></script>
<script type="text/javascript" src="../util/tween.js"></script>
<script type="text/javascript" src="ui.js"></script>
<script type="text/javascript">
var glayer = new XLib.UI.GLayer();
</script>
<style type="text/css">
*{font-size:12px; margin:0px; padding:0px;}
p.p{display:block; height:20px; line-height:20px; margin:0px; padding:0px;}
.xlib-title{width:100px; height:24px; line-height:24px; text-align:center; color:#fff; float:left; background:#000; cursor:pointer;}
.xlib-cur{background:#fff; color:#000;}

/*
.xlib-ui-glayer-full{display:block; position:absolute; width:1200px; height:1200px; left:0px; top:0px; margin:0; padding:0; background-color:#000; filter:Alpha(opacity=10); opacity:0.1; z-index:2999;}
.xlib-ui-glayer-panel{display:block; position:absolute; left:30px; top:30px; margin:0; padding:0; font:12px/1.231 Tahoma,Helvetica,Arial,Simsun,sans-serif; width:550px; height:400px; z-index:30000;}
.xlib-ui-glayer-mask{display:block; position:absolute; left:0px; top:0px; width:550px; height:400px; background-color:#000; filter:Alpha(opacity=50); opacity:0.5; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; z-index:1;}
.xlib-ui-glayer-content{display:block; position:relative; margin:10px; border:#76abd3 1px solid; background-color:#fff; z-index:2;}
.xlib-ui-glayer-title{display:block; background-color:#ecf4fb; height:28px; line-height:28px; text-indent:8px; font-weight:bold;}
.xlib-ui-glayer-closer{display:block; position:absolute; right:9px; top:9px; background:transparent url(img/ui.png) no-repeat -244px -119px; font:0px/0 Tahoma,Helvetica,Arial,Simsun,sans-serif; width:9px; height:8px; text-indent:-1000px;}
.xlib-ui-glayer-body, .xlib-ui-glayer-inner{margin:0; padding:0;font:12px/1.231 Tahoma,Helvetica,Arial,Simsun,sans-serif;}
.xlib-ui-glayer-remain{height:24px;line-height:24px; text-align:center;}
*/
</style>
</head>

<body>
<button type="button" id="btn0">show dialog</button>
<button type="button" id="btn1">show dialog2</button>
<button type="button" id="btn2">show dialog3</button>
<span id="sel"></span>
<select>
  <option>dddddddddd</option>
  <option>dddddddddd</option>
  <option>dddddddddd</option>
  <option>dddddddddd</option>
  <option>dddddddddd</option>
</select>
<div id="sp_test"></div>
<br /><br /><br /><br /><br />
<div id="_p">
  <div id="container" style="border:1px solid red; width:500px; height:120px; position:relative;">
    <div id="slider" style="width:500px; height:120px; overflow:hidden;">
      <div id="scroller">
        <div style="width:500px; height:120px; background:red; float:left;" class="slider-item">1</div>
        <div style="width:500px; height:120px; background:green; float:left;" class="slider-item">2</div>
        <div style="width:500px; height:120px; background:yellow; float:left;" class="slider-item">3</div>
        <div style="width:500px; height:120px; background:blue; float:left;" class="slider-item">4</div>
        <div style="width:500px; height:120px; background:gray; float:left;" class="slider-item">5</div>
      </div>
    </div>
    <div id="subtitle" style="position:absolute; background:#fff; left:0px; bottom:0px;">
      <div class="xlib-title">Red Block</div>
      <div class="xlib-title">Green Block</div>
      <div class="xlib-title">Yellow Block</div>
      <div class="xlib-title">Blue Block</div>
      <div class="xlib-title">Gray Block</div>
    </div>
  </div>
</div>
<!--
<div class="xlib-ui-glayer-panel">
  <div class="xlib-ui-glayer-mask"></div>
  <div class="xlib-ui-glayer-content">
    <h2 class="xlib-ui-glayer-title">Title</h2>
    <div class="xlib-ui-glayer-body">
      <div class="xlib-ui-glayer-inner">asdfasdf<br />asdfasdf<br />asdfasdf<br /></div>
      <a class="xlib-ui-glayer-closer" href="###" title="关闭">关闭</a>
      <div class="xlib-ui-glayer-remain">3秒后自动关闭...</div>
    </div>
  </div>
</div>
<div class="xlib-ui-glayer-full">
  <iframe frameborder="0" vspace="0" hspace="0" marginwidth="0" marginheight="0" scrolling="0" src=""></iframe>
</div>
-->
</body>
<script type="text/javascript">
var d0 = new XLib.UI.Dialog();
var d1 = new XLib.UI.Dialog();
var d2 = new XLib.UI.Dialog();
var cfg0 = {
  id : 0,
  title : "提示",
  content : '设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。在CSS1中此伪类仅可用于 a 对象。对于无 href 属性(特性)的 a 对象，此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。',
  icon : 1,
  drag : true,
  btns : [{label:"确定", handler:function(){XLib.UI.hidden(0)}, disabled:false}, {label:"取消", handler:function(){XLib.UI.hidden(0)}, disabled:false}]
};

var cfg1 = {
  id : 1,
  title : "提示",
  content : '<div style="padding:10px;">设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。在CSS1中此伪类仅可用于 a 对象。对于无 href 属性(特性)的 a 对象，此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。</div>',
  icon : 0,
  drag : true,
  btns : [{label:"确定", handler:function(){XLib.UI.hidden(1)}, disabled:false}, {label:"取消", handler:function(){XLib.UI.hidden(1)}, disabled:true}]
};

var cfg2 = {
  id : 2,
  title : "提示",
  content : '<div style="padding:10px;">设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。在CSS1中此伪类仅可用于 a 对象。对于无 href 属性(特性)的 a 对象，此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。</div>',
  icon : 0,
  drag : true,
  btns : null
};

XLib.Event.addEventListener("btn0", "click", function(){
  d0.showDialog(cfg0);
}, [], false);
XLib.Event.addEventListener("btn1", "click", function(){
  d1.showDialog(cfg1);
}, [], false);
XLib.Event.addEventListener("btn2", "click", function(){
  d2.showDialog(cfg2);
}, [], false);

function doChanged()
{
    alert("event.datatype = " + XLib.Event.getEvent().datatype + "\nevent.data = " + XLib.Event.getEvent().data + "\n" + "id = " + XLib.Event.getSrcElement().id + "\nvalue = " + XLib.DOM.$E("html_sel_test").value + "\ntext = " + XLib.DOM.$E("html_sel_test").options[XLib.DOM.$E("html_sel_test").selectedIndex].text);
}
var jsel = new XLib.UI.JSelect();
jsel.setEventHandler({$onchange : doChanged});
jsel.setAttributes({$id:"test", $name:"test", width:200, height:20, offsetX:-2, offsetY:20});
jsel.create("sel");
jsel.add(new XLib.UI.JOption("请选择", ""));
jsel.add(new XLib.UI.JOption("深圳", "SZ", true, true));
jsel.add(new XLib.UI.JOption("北京", "BJ"));
jsel.add(new XLib.UI.JOption("上海", "SH"));
jsel.add(new XLib.UI.JOption("广州", "GZ"));
jsel.add(new XLib.UI.JOption("长沙", "CS"));
jsel.done();

var sp = new XLib.UI.SlidePanel();
sp.init({
    target : "sp_test",
    id : "sp0",
    width : 300,
    height : 120,
    wayWidth : 0,
    wayHeight : 120,
    barWidth : 8,
    barHeight : 20,
    scrollSize : 20,
    layout : sp.RIGHT,
    cssTexts : [
        '#sp_test .slide-panel{background-color:#DEDEDE;}',
        '#sp_test .slide-way{border-left:1px solid #686868; border-right:1px solid #fff;}',
        '#sp_test .slide-bar{background-color:yellow;}',
        '#sp_test .slide-bar-hover{background-color:red;}',
        '#sp_test .slide-bar-dis{background-color:gray;}'
    ]
});
sp.create([
  '<p class="p">今日焦点：给群众贴标签才是别有用心 </p>',
  '<p class="p">今日专栏：连城管局长们都参加非法组织</p>',
  '<p class="p">今日思想：98.6%的中国富豪没问题？</p>',
  '<p class="p">今日社会：如果章子怡裸奔 我也裸奔 </p>',
  '<p class="p">民生日记：宁嫁农民工，不嫁男白领</p>',
  '<p class="p">燕山讲堂：雷颐 制度滞后与清王朝覆亡 </p>',
  '<p class="p">青年发帖举报遭起诉续：获1.68万国家赔偿 </p>',
  '<p class="p">网瘾少年被殴死调查：黑训练营两年盈利千万 </p>',
  '<p class="p">9岁男孩被逼捡垃圾赚钱供其父酗酒(图) </p>',
  '<p class="p">刘德华在官网承认结婚 向粉丝留言《对不起》 </p>',
  '<p class="p">日本大选进入最后冲刺 执政党选情堪忧(图) </p>',
  '<p class="p">胡润发布中国富豪特别报告：10年间17人入狱(图) </p>',
  '<p class="p">浙江规定交通肇事报警非自首 专家称有违刑法 </p>',
  '<p class="p">俄媒称中俄阿尔泰天然气管道建设被无限期冻结 </p>',
  '<p class="p">反价格垄断规定征求意见 价格同盟受法律约束 </p>',
  '<p class="p">发改委要求取消有线电视服务不合理收费 </p>',
  '<p class="p">人大官员称促进社会公平正义将成立法重点 </p>',
  '<p class="p">中石油受益于新定价机制 炼油业务扭亏为盈 </p>'
]);
function doUpdate(){
    sp.updateData([
      '<p class="p">今日焦点：给群众贴标签才是别有用心 </p>',
      '<p class="p">今日专栏：连城管局长们都参加非法组织</p>',
      '<p class="p">今日思想：98.6%的中国富豪没问题？</p>',
      '<p class="p">今日社会：如果章子怡裸奔 我也裸奔 </p>',
      '<p class="p">民生日记：宁嫁农民工，不嫁男白领</p>',
      '<p class="p">燕山讲堂：雷颐 制度滞后与清王朝覆亡 </p>',
      '<p class="p">青年发帖举报遭起诉续：获1.68万国家赔偿 </p>',
      '<p class="p">网瘾少年被殴死调查：黑训练营两年盈利千万 </p>',
      '<p class="p">9岁男孩被逼捡垃圾赚钱供其父酗酒(图) </p>',
      '<p class="p">刘德华在官网承认结婚 向粉丝留言《对不起》 </p>',
      '<p class="p">日本大选进入最后冲刺 执政党选情堪忧(图) </p>',
      '<p class="p">胡润发布中国富豪特别报告：10年间17人入狱(图) </p>',
      '<p class="p">浙江规定交通肇事报警非自首 专家称有违刑法 </p>'
    ]);
}

var slider = new XLib.UI.Slider();
slider.init({
    interval:5000,
    width:500,
    height:120,
    speed:10,
    change:500,
    duration:10,
    paramA:0,
    paramB:0,
    easing:"Bounce",
    easingType:slider.IN,
    dir:slider.HORIZONTAL,
    container:"container",
    slider:"slider",
    scroller:"scroller",
    blockClass:"slider-item",
    subtitle:"subtitle",
    titleClass:"xlib-title",
    currentClass:"xlib-cur",
    eventType:"mouseover"
});
slider.start();

var layer = new XLib.UI.DDLayer(false);
layer.create("test_layer", null, null, {
  title:"测试",
  content:"...................",
  width:300,
  height:"auto",
  left:"auto",
  top:"auto",
  closer:true,
  auto:false,
  mask:false
});
layer.show("test_layer");

//----------------------------------------

var s = [
  '<p class="p">今日焦点：给群众贴标签才是别有用心 </p>',
  '<p class="p">今日专栏：连城管局长们都参加非法组织</p>',
  '<p class="p">今日思想：98.6%的中国富豪没问题？</p>',
  '<p class="p">今日社会：如果章子怡裸奔 我也裸奔 </p>',
  '<p class="p">民生日记：宁嫁农民工，不嫁男白领</p>',
  '<p class="p">燕山讲堂：雷颐 制度滞后与清王朝覆亡 </p>',
  '<p class="p">青年发帖举报遭起诉续：获1.68万国家赔偿 </p>',
  '<p class="p">网瘾少年被殴死调查：黑训练营两年盈利千万 </p>',
  '<p class="p">9岁男孩被逼捡垃圾赚钱供其父酗酒(图) </p>',
  '<p class="p">刘德华在官网承认结婚 向粉丝留言《对不起》 </p>',
  '<p class="p">日本大选进入最后冲刺 执政党选情堪忧(图) </p>',
  '<p class="p">胡润发布中国富豪特别报告：10年间17人入狱(图) </p>',
  '<p class="p">浙江规定交通肇事报警非自首 专家称有违刑法 </p>',
  '<p class="p">俄媒称中俄阿尔泰天然气管道建设被无限期冻结 </p>',
  '<p class="p">反价格垄断规定征求意见 价格同盟受法律约束 </p>',
  '<p class="p">发改委要求取消有线电视服务不合理收费 </p>',
  '<p class="p">人大官员称促进社会公平正义将成立法重点 </p>',
  '<p class="p">中石油受益于新定价机制 炼油业务扭亏为盈 </p>'
].join("");

glayer.show({
  title:"测试内容",
  width:500,
  height:0,
  content:s,
  frame:false,
  drag:true,
  delay:0
});
</script>
</html>
